<template>
  <div>
    <div class="music-box">
      <div class="music-boxl">
        <span class="iconfont icongedan music-icon"></span>
        <h2 class="music-tit">开心小音乐</h2>
      </div>
      <div class="swiper-container swiper-container-music">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            2
          </div>
          <div class="swiper-slide">slider2</div>
          <div class="swiper-slide">slider3</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    var mySwiper = new Swiper('.swiper-container-music', {
      // 自动播放时间
      autoplay: 3000,
      // 用户操作swiper之后，是否禁止autoplay。默认为true
      // autoplayDisableOnInteraction: false,
      // 循环播放
      loop: true,
      // 滑动到底就开始翻页
      // nested: true
      // resistanceRatio: 0,
      // 默认开始显示第几页
      // initialSlide: 4,
      // slide之间的距离
      // spaceBetween: 4,
      // loopedSlides: 8,
      // slidesPerView: 'auto',
      // 启动动态检查器默认为false
      // observer: true,
      // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。\
      // 纵向显示几个
      // slidesPerColumn: 3,
      // slidesPerColumnFill: 'column'
      // observerParents: true,
      // 每组显示个数
      // slidesPerView: 3
      // 分页器也就是小圆点
      // pagination: '.swiper-pagination'
      // 淡入淡出功能
      effect: 'fade',
      fade: {
        crossFade: true
      }
    })
    console.log(mySwiper)
  }
}
</script>

<style lang="less" scoped>
.music-box {
  height: 120px;
  width: 98%;
  margin-top: 23px;
  margin-left: 3px;
  box-shadow: 0 0 10px #06c;
  .music-boxl {
    .music-icon {
      font-size: 18px;
    }
    .music-tit {
      margin-left: 3px;
      display: inline-block;
      font-size: 17px;
      color: red;
    }
  }
}
</style>
